<template>
  <!--手机联系人组件-->
  <div :class="{ 'search-open-contact': !$store.state.headerStatus }">

    <header id="wx-header">
      <div class="center">
        <div
          @click="$router.back()"
          tag="div"
          class="iconfont icon-return-arrow"
        >
          <span></span>
        </div>
        <span v-if="del == 0">{{
          groupId > 0 ? "选择联系人" : "发起群聊"
        }}</span>
        <span v-if="del == 1">聊天成员({{ getGroupList.length }})</span>
      </div>
    </header>

    <!--这里的 search 组件的样式也需要修改一下-->
    <!-- <search></search> -->

    <section>
      <van-checkbox-group v-model="result">
        <!--联系人集合-->

        <div class="userlist-box" v-if="del == 0">
          <template v-for="(value, key) in contactsList">
            <!--首字母-->
            <div :ref="`key_${key}`" :key="key" class="weui-cells__title">
              {{ key }}
            </div>
            <div class="weui-cells" :key="key + 1">
              <van-checkbox
                class="weui-cell weui-cell_access"
                :name="item.mid"
                v-for="item in value"
                :key="item.mid"
                :checked-color="
                  notHandle.indexOf(item.mid) > -1 ? '#b4edcd' : '#129611'
                "
                @click="checkBoxClick(item.mid)"
              >
                <div class="weui-cell">
                  <div class="weui-cell__hd">
                    <img
                      v-if="item.getClientMid"
                      :src="item.getClientMid.headimg"
                      class="home__mini-avatar___1nSrW"
                    />
                  </div>
                  <div class="weui-cell__bd" v-if="item.getClientMid">
                    {{ item.remark ? item.remark : item.getClientMid.nickname }}
                  </div>
                </div>
              </van-checkbox>
            </div>
          </template>
          <div style="height:100px">&nbsp;</div>
        </div>

        <!-- 群成员集合 -->
        <div class="weui-cells" v-if="del == 1">
          <div v-for="(item, key) in getGroupList" :key="key">
            <van-checkbox
              class="weui-cell weui-cell_access"
              :name="item.uid"
              checked-color="#129611"
              v-if="item.uid != $store.state.uid"
            >
              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <img
                    v-if="item.getClientUid"
                    :src="item.getClientUid.headimg"
                    class="home__mini-avatar___1nSrW"
                  />
                </div>
                <div class="weui-cell__bd" v-if="item.getClientUid">
                  {{ item.remark ? item.remark : item.getClientUid.nickname }}
                </div>
              </div>
            </van-checkbox>
          </div>
            <div style="height:100px">&nbsp;</div>
        </div>
      </van-checkbox-group>
    </section>
   
    <div class="btn-group-box">
      <button
        v-if="del == 0"
        type="button"
        :class="groupId != 0 || result.length > 1 ? '' : 'gray'"
        @click="createGroup"
      >
        完成{{ result.length > 0 ? "(" + result.length + ")" : "" }}
      </button>
      <button
        v-else
        type="button"
        class="red"
        :class="result.length > 1 ? '' : 'gray'"
        @click="delGroupUser"
      >
        删除{{ result.length > 0 ? "(" + result.length + ")" : "" }}
      </button>
    </div>
  </div>
</template>
<script>
import search from "../common/search";

import { Checkbox, CheckboxGroup, Icon } from "vant";
import {
  ApiCreateGroup,
  ApiGetFriendList,
  ApiCelGroupUser,
} from "@/api/api/message";
import { showToast } from "@/utils/comm";

export default {
  mixins: [window.mixin],
  components: {
    search,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Icon.name]: Icon,
  },
  data() {
    return {
      pageName: "通讯录朋友",
      result: [], //选中的列表
      notHandle: [], //不允许操作的列表
      groupId: 0,
      FriendNumber: 0, //群组列表
      del: 0, //是否是删除模式  1 删除 0 添加
    };
  },
  watch: {
    getGroupListId(val) {
      //如果是删除模式 不需要这个了
      if (this.del) {
        return false;
      }
      for (let i in this.contactsList) {
        let userList = this.contactsList[i];
        for (let j in userList) {
          //列表用户的id
          let mid = userList[j].mid;
          //如果这个id 存在于 当前的群里面  那么就给result 选上
          if (this.getGroupListId.indexOf(mid) > -1) {
            this.result.push(mid);
            this.notHandle.push(mid); //加入禁止操作列表
          }
        }
      }
    },
  },
  computed: {
    // 动态计算首拼检索
    contactsInitialList() {
      return this.$store.getters.contactsInitialList;
    },
    contactsList() {
      return this.$store.getters.contactsList;
    },
    // 返回当前群组中的成员列表
    getGroupList() {
      let groupList = this.$store.state.groupList;
      let groupUserList = [];
      for (let i in groupList) {
        if (groupList[i].id == this.groupId) {
          return groupList[i].getUserList;
        }
      }
      return groupUserList;
    },
    //返回成员的id
    getGroupListId() {
      let groupUserList = [];
      for (let j in this.getGroupList) {
        groupUserList.push(this.getGroupList[j].uid);
      }
      return groupUserList;
    },
  },
  mounted() {
    this.groupId = this.$route.query.groupId || 0;
    this.del = this.$route.query.del || 0;
    this.init(); //初始化通讯录数据
    let mid = parseInt(this.$route.query.mid || 0);
    if(mid){
        this.result.push(mid)
        this.notHandle.push(mid)
    }
  },
  methods: {
    //跳转定位
    toPs(i) {
      window.scrollTo(0, this.$refs["key_" + i][0].offsetTop);
    },
    init() {
      //没有通讯录数据 就重新加载
      if (this.contactsList.length > 0) {
        return;
      }
      ApiGetFriendList().then(({ data, msg }) => {
        this.$store.commit("setFriendList", data.friend);
        let number = 0;
        for (let i in data.friend) {
          if (data.friend[i].type == 1) number++;
        }
        this.FriendNumber = number;
      });
    },
    //创建群组
    createGroup() {
      if (this.groupId == 0 && this.result.length <= 1) {
        showToast("需要选择2人以上才能建群");
        return;
      }

      //返回上一页
      if (this.result.length == 0) {
        this.$router.back();
      }

      let params = {
        groupId: this.groupId,
        groupUserList: this.result,
      };
      ApiCreateGroup(params).then(({ data, msg }) => {
          //有id 就返回上一级
          if(this.groupId){
            this.$router.back();
          }else{
              let groupInfo = data
              //直接进入 群聊天中
              this.$router.replace({
                  path:'/wechat/dialogue',
                  query:{
                      mid:groupInfo.id,
                      name:groupInfo.name,
                      group_num:groupInfo.member_number,
                  }
              })
          }
        
      });
    },
    //删除群组用户
    delGroupUser() {
      if (this.result.length <= 0) {
        return;
      }
      let params = {
        groupId: this.groupId,
        groupUserList: this.result,
      };
      ApiCelGroupUser(params).then(({ data, msg }) => {
        this.$router.back();
      });
    },
    //点击选择  如果是禁止点击的那就自动加上
    checkBoxClick(mid) {
      if (this.notHandle.indexOf(mid) > -1) {
        this.result.push(mid);
      }
      return true;
    },
  },
};
</script>

<style scoped>
.btn-group-box {
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 10px 10px;
  background-color: #fff;
  border-top: 1px solid #e8e8e8;
}
.btn-group-box button {
  padding: 5px 10px;
  background-color: #129611;
  color: #fff;
  border: 0px;
  border-radius: 5px;
  min-width: 70px;
}
.btn-group-box .gray {
  background-color: #eee;
  color: #999;
}

.btn-group-box .red {
  background-color: #fd6242;
  color: #fff;
}
.weui-cell {
  padding: 3px 10px;
}

.notHandle .van-icon-success {
  background-color: #b4edcd !important;
  border-color: #b4edcd !important;
}
.userlist-box{
  height: 100vh;
  margin-bottom: 50px;
}
.van-checkbox-group{
      height: 100vh;
    overflow-y: auto;
}
</style>